import { ArrowRightOutlined } from "@ant-design/icons"
import { StoryObj } from "@storybook/react"
import { Card, Divider, Flex, Form, Typography } from "antd"

import { NormalInput } from "@/components/common"

const Template = (args: { labelId: string; name: string }) => {
	const { Title, Paragraph, Text } = Typography
	return (
		<Form>
			<Typography>
				<Title level={2}>普通输入框</Title>
				<Paragraph>
					可复用表单输入框，如缺省示例&quot;<Text italic>代理账号</Text>&quot;, 必须在business组件中封装后导出使用,
					示例封装关键代码如下：
					<Divider />
					<Flex gap={8} align="center">
						<Text code>{`<NormalInput labelId="${args.labelId}" name="${args.name}" />`}</Text>
						<ArrowRightOutlined />
						<Card>
							<NormalInput {...args} />
						</Card>
					</Flex>
				</Paragraph>
			</Typography>
			{/* <Flex vertical gap={8}>
				<Flex gap={16} align="center">
					<span style={{ fontWeight: "bold" }}>代码示例:</span>
					<span></span>
				</Flex>
			</Flex> */}
		</Form>
	)
}

export default {
	title: "普通输入框类型",
	component: Template
}

type Story = StoryObj<typeof Template>

export const AgentAccount: Story = {
	args: {
		labelId: "label.agentAccount",
		name: "userName"
	}
}
